/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var WIDTH = 800;
var HEIGHT = 600;
var BORDER_STROKE = 2;

var no_players = 4;
var sel_space = 200;
var box_size = 100;

function draw(ctx) {
    
    preDraw(ctx);
    
    var addPad = (WIDTH/2) - (((no_players - 1) * sel_space)/2) - (box_size/2);
    
    for(var p=0;p<no_players;p++){
        ctx.fillRect(addPad + p * sel_space, HEIGHT/2 - (box_size/2), box_size, box_size);
    }
    
}

function preDraw(ctx) {
    
    ctx.lineWidth = BORDER_STROKE;
    ctx.strokeStyle = "rgba(125,200,255,1.0)";
    ctx.beginPath();
    ctx.moveTo(400,0);
    ctx.lineTo(400,600);
    ctx.moveTo(0,300);
    ctx.lineTo(800,300);
    ctx.stroke();
    
    ctx.lineWidth = BORDER_STROKE * 2;
    ctx.strokeStyle = "rgba(50,125,200,1.0)";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(800,0);
    ctx.lineTo(800,600);
    ctx.lineTo(0,600);
    ctx.lineTo(0,0);
    ctx.stroke();
}
